<template>
  <div class="daohan">
    <ul class="daohan-ul">
      <div class="logo"><img src="/imgs/logo.png"
             alt=""></div>
      <div class="daohan-li"
           v-for="item in daohan"
           :key="item.id">
        <li :class="daohan_index==item.id? 'active' : ''"
            @click="daohan_click(item.id,item.path)">{{ item.title }}</li>
      </div>
      <el-dropdown v-if="user.length != ''"
                   class="user">
        <div class="geren">
          <img :src="user[0].head_img"
               alt="">
          <p class="name">{{ user[0].username }}</p>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="gerenzx()">修改个人信息</el-dropdown-item>
            <el-dropdown-item @click="tuichu()">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <div class="user"
           v-if="user==''"
           @click="denglu()">
        <p class="geren">登录/注册</p>
      </div>
    </ul>

  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
// import axios from '@/axios'
// const emitter = mitt()
import { useCounterStore } from '@/stores/ceshi'
import { useRouter } from 'vue-router'
import { ElLoading } from 'element-plus'
export default {
  name: 'DaoHan',
  props: {
    daohan_index: {
      type: Number,
      default: 1
    }
  },
  setup() {
    const store = useCounterStore()
    // console.log(store.user)

    // 登录
    let denglu = () => {
      router.push('/login')
    }
    // 修改密码
    let gaimima = () => {
      router.push('/edit')
    }
    // 修改个人信息
    let geren = () => {
      router.push('/xiuxin')
    }
    // 个人中心
    let gerenzx = () => {
      router.push('/geren')
    }
    // 退出登录
    let tuichu = () => {
      const loading = ElLoading.service({
        lock: true,
        text: '退出登录中，请稍等',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      localStorage.removeItem('username')
      localStorage.removeItem('token')
      store.aaa()
      setTimeout(() => {
        loading.close()
        location.reload()
        router.push('/')
      }, 2000)
    }
    let user = store.user
    // let username=localStorage.getItem('username')
    const router = useRouter()
    const daohan = ref([
      { id: 1, title: '首页', path: '/shouye' },
      { id: 2, title: '宠物领养', path: '/adopt' },
      { id: 3, title: '宠物救助', path: '/help' },
      { id: 4, title: '宠物论坛', path: '/forum' },
      { id: 5, title: '宠物小知识', path: '/knowledge' }
    ])
    // let daohan_index = ref(1)
    const daohan_click = (index, path) => {
      router.push(path)
    }

    onMounted(() => {
      if (localStorage.getItem('username') == null) {
        router.push('/')
      }
    })
    return {
      daohan_click,
      daohan,
      user,
      geren,
      tuichu,
      denglu,
      gaimima,
      gerenzx
    }
  }
}
</script>

<style scoped lang="less">
/* 在这里添加样式 */
.daohan {
  width: 100%;
  min-width: 1200px;
  height: 80px;
  background-image: radial-gradient(ellipse, #f8f1c7, #eeecde);
  font-size: 16px;
  font-weight: 600;
  // color: #000000;
  .daohan-ul {
    width: 1200px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    // border-bottom: 1px solid #111;

    .logo {
      width: 133px;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;

      img {
        width: 85px;
        height: 85px;
      }
    }
    .daohan-li {
      li {
        width: 133px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        cursor: pointer;
      }

      li:hover {
        background-color: rgba(1, 1, 1, 0.1);
      }
      .active {
        /* background-image: radial-gradient(ellipse, red, yellow);*/
        border-radius: 30px;
        background-image: radial-gradient(ellipse, #eeecde, #cdbf62);
      }
    }
    .user {
      box-shadow: none; /* 禁用 box-shadow，如果黑框是由它造成的 */
      outline: none;
      .geren {
        outline: none;
        width: 133px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        cursor: pointer;
        border-radius: 15px;
        background-color: #fff;
        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
        .name {
          font-weight: 400;
          margin-left: 5px;
        }
      }
    }
  }

  .gelidai {
    width: 100%;
    height: 8px;
    background-color: #eeecde;
    background: linear-gradient(to bottom, #eeecde, #cdbf62);
  }
}
</style>